<template>
  <div class="admin-container">
    <el-container class="admin-layout">
      <!-- 侧边栏导航 -->
      <el-aside width="220px" class="admin-sidebar">
        <div class="admin-title">管理界面</div>
        <el-menu
          active-text-color="#ffd04b"
          background-color="#f8f9fa"
          text-color="#333"
          @select="handleSelect"
        >
          <el-menu-item index="1">
            <i class="el-icon-user"></i>
            <span>用户管理</span>
          </el-menu-item>
          <el-menu-item index="2">
            <i class="el-icon-s-order"></i>
            <span>角色权限管理</span>
          </el-menu-item>
          <el-menu-item index="3">
            <i class="el-icon-s-promotion"></i>
            <span>检修文件管理</span>
          </el-menu-item>
          <el-menu-item index="4">
            <i class="el-icon-picture-outline"></i>
            <span>管道标准管理</span>
          </el-menu-item>
          <el-menu-item index="5">
            <i class="el-icon-office-building"></i>
            <span>预警管理</span>
          </el-menu-item>
          <el-submenu index="6">
            <template slot="title">
              <i class="el-icon-office-building"></i>
              <span>模型管理</span>
            </template>
            <el-menu-item index="6-1">基本模型管理</el-menu-item>
            <el-menu-item index="6-2">实例模型管理</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>

      <!-- 主内容区 -->
      <el-container class="admin-main">
        <el-header class="admin-header">
          <el-button
            type="danger"
            size="medium"
            icon="el-icon-switch-button"
            @click="back"
          >
            退出登录
          </el-button>
        </el-header>

        <el-main class="admin-content">
          <PipeStandard v-if="flags.standards"></PipeStandard>
          <PipeWarning v-if="flags.warning"></PipeWarning>
          <BaseModel v-if="flags.baseModel" ></BaseModel>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import BaseModel from "@/components/admin/BaseModel.vue";
import PipeStandard from "@/components/admin/PipeStandard.vue";
import PipeWarning from "@/components/admin/PipeWarning.vue";

export default {
  name: "admin",
  components: {
    PipeStandard,
    PipeWarning,
    BaseModel,
  },
  data() {
    return {
      flags: this.initFlags(),
      sysUsers:{},
    };
  },
  methods: {
    //选择逻辑，初始化flag，全部设置为false
    initFlags() {
      const allFlags = {
        users: false,
        roles: false,
        files: false,
        standards: false,
        warning: false,
        baseModel: false,
        instanceModel: false,
      };
      return allFlags;
    },
    //flag激活
    setFlag(key) {
      this.flags = this.initFlags();
      if (key == "1") this.flags.users = true;
      else if (key == "2") this.flags.roles = true;
      else if (key == "3") this.flags.files = true;
      else if (key == "4") this.flags.standards = true;
      else if (key == "5") this.flags.warning = true;
      else if (key == "6-1")this.flags.baseModel = true;
      else if (key == "6-2") this.flags.instanceModel = true;
    },
    // 菜单回调
    handleSelect(key) {
      this.setFlag(key);
    },
    //退出管理端
    back() {
      this.$router.push({ name: "login" });
      this.$notify({
        title: "成功",
        message: "退出管理端成功！",
        type: "success",
      });
    },
  },
  mounted() {
    this.setFlag("1");
  },
};
</script>

<style scoped>
.admin-container {
  height: 100vh;
  overflow: hidden;
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", Arial, sans-serif;
}

.admin-layout {
  height: 100%;
}

.admin-sidebar {
  background-color: #f8f9fa;
  border-right: 1px solid #e6e6e6;
  transition: width 0.3s;
}

.admin-title {
  height: 60px;
  line-height: 60px;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  color: #333;
  border-bottom: 1px solid #e6e6e6;
}

.admin-header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 60px;
  padding: 0 20px;
  background-color: #fff;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
}

.admin-content {
  padding: 20px;
  background-color: #f5f7fa;
  height: calc(100% - 60px);
}

/* 菜单项悬停效果 */
.el-menu-item:hover {
  background-color: #e6f7ff !important;
}

/* 响应式调整 */
@media screen and (max-width: 768px) {
  .admin-sidebar {
    width: 64px !important;
  }
  .admin-title span,
  .el-menu-item span {
    display: none;
  }
}

.admin-content > * {
  transition: opacity 0.3s;
}
</style>
